<template>
    <el-scrollbar class="left" v-loading="loading" height="100%">

        <el-tree :data="datass" :style="{ height: '50px', backgroundColor: 'var(--backcor)' }" ref="treeRef" default-expand-all node-key="id" highlight-current :props="defaultProps"
            :draggable="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node" @click.stop="getShowDetail!(data.id)">
                    <span>{{ node?.label }}</span>
                    <div style="display: flex;" v-if="node.label != '管理员'">
                        <div class="spans" type="text" @click.stop="showdia(data), dialogVisible = true">改名</div>
                        <div class="spans" type="text" @click.stop="showdia(data), dialogVisible2 = true">新增</div>
                        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="NO"
                            @confirm="confirmEvent" icon-color="#626AEF" title="确定要删除该组织吗">
                            <template #reference>
                                <div class="spans" type="text" @click.stop="showdia(data)">删除</div>
                            </template>
                        </el-popconfirm>
                        <el-popconfirm  width="30" confirm-button-text="OK" cancel-button-text="NO"
                        :title="'当前组织的id为'+data.id" :hide-icon="true">
                            <template #reference>
                                <div class="spans" type="text">查看id</div>
                            </template>
                        </el-popconfirm>

                    </div>
                </span>
            </template>
        </el-tree>
    </el-scrollbar>

    <teleport to="body">
        <el-dialog v-model="dialogVisible" title="修改组织名称" width="30%">
            <el-input v-model="input" :placeholder="nodes?.label" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="rename()">
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </teleport>
    <teleport to="body">
        <el-dialog v-model="dialogVisible2" title="新增组织" width="30%">
            <el-input v-model="input2" placeholder="请输入新增组织" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="rename()">
                        新增
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </teleport>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { showUser, updateOrganization, insertOrganization, deleteOrganization } from '@/request/api'
import { useStore } from '@/stores/counter'
import { ElMessage } from 'element-plus'
const data = defineProps<{
    getShowDetail: Function
}>()
interface Nodes {
    label: string,
    id: string
}
const store = useStore()
const datass: any = reactive([])
let loading = ref(false)
//获取所有组织数据
const requestOragn = () => {
    loading.value = true
    showUser(store.user.organizationId).then((res) => {
        datass.length = 0
        datass.push(res.data)
        loading.value = false
    })
}
requestOragn()
const defaultProps = reactive({
    children: 'children',
    label: 'label',
    disabled: 'disabled',
})
let nodes = ref<Nodes>()
let dialogVisible = ref(false)        //  弹窗控制
let dialogVisible2 = ref(false)        //  弹窗控制
//修改名称
let input = ref('')             //修改名称的表单
const showdia = (node: Nodes) => {
    nodes.value = node
}
//组织操作
const rename = () => {
    //新增
    if (dialogVisible2.value) {
        if (input2.value == '') {
            ElMessage.error('请输入新增名称')
            return
        }
        insertOrganization({
            organizationId: nodes.value?.id,
            name: input2.value
        }).then((res) => {
            return res.data ? Promise.resolve(res.data) : Promise.reject(res.msg)

        }).then((res: string) => {
            ElMessage({
                message: res,
                type: 'success',
            })
            requestOragn()
            dialogVisible2.value = false
            input2.value = ''
        }).catch(err => {
            ElMessage.error(err)
        })
    }
    else {
        //修改
        if (input.value == '') {
            ElMessage.error('请输修改的名称')
            return
        }
        updateOrganization({
            name: input.value,
            organizationId: nodes.value?.id
        }).then(res => {
            ElMessage({
                message: res.data,
                type: 'success',
            })
            requestOragn()
            dialogVisible.value = false
            input.value = ''
        })
    }

}

//删除组织
const confirmEvent = () => {
    deleteOrganization<string>(nodes.value!.id).then(res => {
      
        return res.data ? Promise.resolve(res.data) : Promise.reject(res.msg)
    }).then((res: string) => {
        ElMessage({
            message: res,
            type: 'success',
        })
        requestOragn()
    }).catch(err => {
        ElMessage.error(err)
    })
}
//新增组织
let input2 = ref('')
</script>

<style lang=less  scoped>
.left {
    height: 100%;
    width: 500px;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #dadadab0;
}

.spans {
    margin: 0px 3px;
    color: #409EFF;
}

.spans::after {
    content: ' ';
    display: block;
    height: 1px;
    background-color: #409EFF;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
    transform-origin: left;

}

.spans:hover::after {
    transform: scale(1);
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.label {
    margin-right: 10px;
    display: inline-block;
}
</style>